<template>
	<view class="px-3" :style="rowHeight" @click="$emit('click')" hover-class="bg-light-muted" hover-stay-time="50">
		<view class="border-bottom">
			<view :class="viewClass" :style="rowHeight">
				<text class="font text-primary" :class="textClass" style="color: #666666;">{{title}}</text>
				<text class="font-sm text-ellipsis"
				v-if="title2" style="color: #666666;margin-top: 6rpx;">{{title2}}</text>
			</view>
		</view>
	</view>	
	
</template>

<script>
export default {
		props:{
			// 主文字
			title:{
				type:String,
				default:""
			},
			// 下层文字,若有则是上下双层文字
			title2:{
				type:String,
				default:""
			}
		},
		computed:{
			// 行高 根据是否标题2判断
			rowHeight(){
				return this.title2 ? "height: 115rpx;" : "height: 88rpx;"
			},
			textClass(){
				return this.title2 ? "mt-2 " : ""
			},
			viewClass(){
				return this.title2 ? "flex flex-column" : "flex flex-column justify-center"
			}
		}
	}	
	
</script>

<style>
</style>
